<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>慕课网|Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!</title>
    <meta name="Keyword" content="代码演示,代码片段,HTML5,CSS3,JavaScript,jQuery,Bootstrap">
    <meta name="Author" content="dunizb">
    <meta name="website" content="http://www.mybry.com">
    <meta name="Description" content="Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!">
    <link type="image/x-icon" rel="shortcut icon" href="favicon.ico"/>
    <link type="text/css" rel="stylesheet" href="css/base.css"/>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <link type="text/css" rel="stylesheet" href="css/lrtk.css"/>
</head>
<body>

<!-------------顶部通栏 Start------------->
<div class="top">
    <!--顶部版心 Start-->
    <div class="top_container w clearfix">

        <!--logo Start-->
        <div class="logo fl">
            <a href="/" title="慕课网">
                <h1>慕课网</h1>
            </a>
        </div>
        <!--logo End-->

        <!--导航部分 开始-->
        <div class="top_nav fl">
            <ul>
                <li><a href="#">课程</a></li>
                <li><a href="http://www.mybry.com/" target="_blank">读你</a><i class="new"></i></li>
                <li><a href="#">计划</a></li>
                <li><a href="#">猿问</a></li>
                <li><a href="#">手记</a></li>
                <li><a href="sz.html">实战</a></li>
            </ul>
        </div>
        <!--导航部分 结束-->

        <!--顶部右侧搜索二维码 开始-->
        <div class="top_right fr">
            <ul>
                <li class="li_search">
                    <input class="input fl" type="text" name="" placeholder="请输入课程名称或关键字" id="searchTxt"/>
                    <a class="input button fl" id="searchBtn" href="javascript:;"></a>
                    <div id="searchTipDiv" class="searchTipDiv">
                        <p>javascript</p>
                        <p>java</p>
                        <p>css3</p>
                        <p>jquery插件</p>
                    </div>
                </li>
                <li class="li_phone"><i class="phone"></i></li>
                <li><a href="#" class="top_right_login">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
        <div id="ewm">
            <div class="sj"></div>
            <p>慕课网APP下载</p>
            <span>iPhone/Android/iPad</span>
            <img src="images/index/ewm.jpg" alt="慕课网APP下载">
        </div>
        <!--顶部右侧搜索二维码 结束-->
    </div>
    <!--顶部版心 End-->
</div>
<!-------------顶部通栏 End------------->


<!-------------轮播图 Start------------->
<div id="slider" class="slider_container">
    <div class="inner">
        <ul class="slider_body">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ol class="slider_btn">
        </ol>
        <!--箭头容器-->
        <div id="arr" class="w arr">
            <span id="right" class="arr_right fr">></span>
            <span id="left" class="arr_left fl"><</span>
        </div>
    </div>
</div>
<!-------------轮播图 End------------->

<!-------------主体部分开始 第一部分 Start------------->
<div class="header_bm_wrap w">
    <div class="header_bm header_bm_l"><img src="images/index/header1.png" alt=""/></div>
    <div class="header_bm header_bm_m"><img src="images/index/header2.png" alt=""/></div>
    <div class="header_bm header_bm_r"><img src="images/index/header3.png" alt=""/></div>
</div>
<!-------------主体部分开始 第一部分 End------------->

<div class="mainbox" id="mainbox">
    <!-------------视频课程 第二部分 Start------------->
    <div class="intro1 bg-grey idx-minwidth">
        <div class="intro1-wrap idx-width">
            <div class="intro1-star"></div>
            <div class="intro1-text hide-text">
                <!--精心制作的视频课程。老师都是技术大牛，实战派，课程内容接地气，实际工作用的着。-->
            </div>
        </div>
    </div>
    <!-------------视频课程 第二部分 End------------->

    <!-------------实时交互 第三部分 Start------------->
    <div class="intro intro2 bg-white idx-minwidth" id="intro2">
        <div class="intro2-wrap idx-width">
            <div class="intro2-text hide-text">
                实时交互的在线编程，无需配置任何编程环境，直接就能在线学习编程，省时省力。
            </div>
            <div class="intro2-computer1"></div>
        </div>
    </div>
    <!-------------实时交互 第三部分 End------------->

    <!-------------学习计划 第四部分 Start------------->
    <div class="intro intro3 bg-grey idx-minwidth" id="intro3">
        <div class="intro3-wrap idx-width">
            <div class="intro3-calender"></div>
            <div class="intro3-text hide-text">
                循序渐进的学习计划，专治各种学习编程迷茫症，有目标有路径，一切尽在掌握之中。
            </div>
        </div>
    </div>
    <!-------------学习计划 第四部分 End------------->

    <!-------------交流互动 第五部分 Start------------->
    <div class="intro intro4 bg-white idx-minwidth" id="intro4">
        <div class="intro4-wrap idx-width">
            <div class="intro4-text hide-text">
                互帮互助的问答社区，有问有答有分享。老师学员同交流，高手小白共进步。
            </div>
            <div class="intro4-hand"></div>
        </div>
    </div>
    <!-------------交流互动 第五部分 End------------->

    <!-------------扩展链接 Start------------->
    <div class="dynamic bg-grey idx-minwidth" id="mooc-dynamic">
        <div class="dynamic-wrap idx-width" id="dynamic-wrap">
            <ul class="dynamic-group clearfix" style="display: block;">
                <li>
                    <a href="#"><img src="images/index/body%20(5).jpg" alt="ipadApp"/></a>
                </li>
                <li>
                    <a href="#"><img src="images/index/body%20(3).jpg" alt="苹果表"/></a>
                </li>
                <li>
                    <a href="#"><img src="images/index/body%20(1).jpg" alt="前端工程师是怎样练成的"/></a>
                </li>
            </ul>
        </div>
    </div>
    <!-------------扩展链接 End------------->

    <!-------------课程介绍 Start------------->
    <div class="icourse bg-grey">
        <!--课程包-->
        <div class="icourse-wrap idx-width">
            <!--大标题-->
            <h2 class="icourse-title hide-text">课程</h2>
            <!--课程介绍主体开始-->
            <ul class="icourse-course clearfix">
                <!--&lt;!&ndash;课程1&ndash;&gt;-->
                <!--<li>-->
                <!--<a href="#">-->
                <!--<div class="icourse-img">-->
                <!--<img src="images/body (10).jpg"/>-->
                <!--</div>-->
                <!--<div class="icourse-intro clearfix">-->
                <!--<p>基于XXX的语言教程第二季</p>-->
                <!--<span class="l">更新至X-X</span>-->
                <!--<span class="r">课程时长X小时X分钟</span>-->
                <!--</div>-->
                <!--</a>-->
                <!--</li>-->
            </ul>
        </div>
    </div>
    <!-------------课程介绍 End------------->

    <!-------------全部课程 Start------------->
    <div class="icourse-all-box">
        <div class="bg-grey icourse-all-wrap">
            <a href="#" class="icourse-all">全部课程</a>
        </div>
    </div>
    <!-------------全部课程 Start------------->
</div>


<!-------------慕课大家庭 Start------------->
<div class="family_box">
    <div class="family_list w">
        <ul class="family_list">
            <li>
                <a href="#">
                    <div class="mask"></div>
                    <img src="images/index/family-1.jpg" alt="">
                </a>
            </li>
            <li>
                <div class="info">
                    <div class="title">
                        <h3>张兵</h3>
                        <span>学生</span>
                    </div>
                    <div class="desc">
                        高级研发工程师，就职于全球颇有影响力的搜索引擎公司，曾供职于新浪。负责移动客户端的相关服务端研发工作，对大流量业务，高并发业务有较多的经验与解决方案。技术极客，喜欢一切新特奇技术。希望把技术做到极致。...
                    </div>
                </div>
                <ul class="family_sutdent">
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <div class="mask"></div>
                    <img src="" alt="">
                </a>
            </li>
            <li>
                <div class="info">
                    <div class="title">
                        <h3>张兵</h3>
                        <span>学生</span>
                    </div>
                    <div class="desc">
                        高级研发工程师，就职于全球颇有影响力的搜索引擎公司，曾供职于新浪。负责移动客户端的相关服务端研发工作，对大流量业务，高并发业务有较多的经验与解决方案。技术极客，喜欢一切新特奇技术。希望把技术做到极致。...
                    </div>
                </div>
                <ul class="family_sutdent">
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <div class="mask"></div>
                    <img src="" alt="">
                </a>
            </li>
            <li>
                <div class="info">
                    <div class="title">
                        <h3>张兵</h3>
                        <span>学生</span>
                    </div>
                    <div class="desc">
                        高级研发工程师，就职于全球颇有影响力的搜索引擎公司，曾供职于新浪。负责移动客户端的相关服务端研发工作，对大流量业务，高并发业务有较多的经验与解决方案。技术极客，喜欢一切新特奇技术。希望把技术做到极致。...
                    </div>
                </div>
                <ul class="family_sutdent">
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                </ul>
            </li>
            <li>
                <ul class="family_sutdent">
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <div class="mask"></div>
                    <img src="" alt="">
                </a>
            </li>
            <li>
                <div class="info">
                    <div class="title">
                        <h3>张兵</h3>
                        <span>学生</span>
                    </div>
                    <div class="desc">
                        高级研发工程师，就职于全球颇有影响力的搜索引擎公司，曾供职于新浪。负责移动客户端的相关服务端研发工作，对大流量业务，高并发业务有较多的经验与解决方案。技术极客，喜欢一切新特奇技术。希望把技术做到极致。...
                    </div>
                </div>
                <ul class="family_sutdent">
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <div class="mask"></div>
                    <img src="" alt="">
                </a>
            </li>
            <li>
                <div class="info">
                    <div class="title">
                        <h3>张兵</h3>
                        <span>学生</span>
                    </div>
                    <div class="desc">
                        高级研发工程师，就职于全球颇有影响力的搜索引擎公司，曾供职于新浪。负责移动客户端的相关服务端研发工作，对大流量业务，高并发业务有较多的经验与解决方案。技术极客，喜欢一切新特奇技术。希望把技术做到极致。...
                    </div>
                </div>
                <ul class="family_sutdent">
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                    <li><a href="#">
                        <div class="mask_stu"></div>
                        <img src="" alt=""></a></li>
                </ul>
            </li>
            <li><a href="#">
                <div class="mask"></div>
                <img src="" alt=""></a></li>
        </ul>
        <div class="family_bigMask"></div>
        <div class="family_word">慕课大家庭</div>
    </div>
</div>
<!-------------慕课大家庭 End------------->

<!-------------手机慕课 Start------------->
<div class="mobile_muke clearfix">
    <div class="w clearfix">
        <div class="qrCode">
            <h2 class="mobile_learn">手机慕课，随时随地学习</h2>
            <div class="mobile_download">
                <a href="#">
                    <div class="mobileVersion">手机版</div>
                </a>
                <a href="#">
                    <div class="ipadVersion">ipad版</div>
                </a>
                <a href="#" class='active'> <span class="spanDefualt"></span>
                </a>
            </div>
        </div>
        <div class="mobile_show"><img src="images/index/footer-2.png" alt=""></div>
        <div class="mobile_hide"><img src="images/index/footer-4.png" alt=""></div>
    </div>
</div>
<!-------------手机慕课 End------------->

<!-------------开始学习按钮 Start------------->
<div class="starLearn clearfix">
    <div class="boxblack">
        <a href="#" class="star">开始学习</a>
    </div>
</div>
<!-------------开始学习按钮 End------------->

<!-------------关于我们 Start------------->
<div class="aboutUs clearfix">
    <div class="w">
        <div class="link clearfix">
            <ul>
                <li><a  class="link_1" href="#"></a></li>
                <li><a  class="link_2" href="#">
                    <div class="flw-weixin-box"></div>
                </a></li>
                <li><a  class="link_3" href="#"></a></li>
                <li><a  class="link_4" href="#"></a></li>
            </ul>
        </div>
        <div class="guide">
            <ul>
                <li><a class='guide_link' href="#">关于我们</a></li>
                <li><a class='guide_link' href="#">人才招聘</a></li>
                <li><a class='guide_link' href="#">讲师招募</a></li>
                <li><a class='guide_link' href="#">联系我们</a></li>
                <li><a class='guide_link' href="#">意见反馈</a></li>
            </ul>
        </div>
    </div>
    <div class="weChat"></div>
</div>
<!-------------关于我们 End------------->

<!-------------友情链接 Start------------->
<div class="friendLink">
    <div class="w clearfix">
        <ul>
            <li><a class='firstLink' href="#">友情链接：</a></li>
            <li><a href="#">360导航</a></li>
            <li><a href="#">PHP站中文网</a></li>
            <li><a href="#">hao123</a></li>
            <li><a href="#">拉勾网</a></li>
            <li><a href="#">web开发者</a></li>
            <li><a href="#">更多>></a></li>
        </ul>
    </div>
</div>
<!-------------友情链接 End------------->

<!-------------版权声明 Start------------->
<div class="copyright">
    Copyright &copy; 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2
</div>
<!-------------版权声明 End------------->

<!-- 返回顶部小火箭 -->
<div class="actGotop"><a href="javascript:;" title="Top"></a></div>

<script src="js/jquery-1.12.4.js"></script>
<script src="js/index.js"></script>
</body>
</html>